<template>
  <el-menu
    class="sidebar-menu"
    :default-active="$route.path"
    :router="true"
    background-color="#f5f5f5"
    text-color="#2c3e50">
    
    <el-menu-item index="/">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </el-menu-item>

    <el-sub-menu index="algorithms">
      <template #title>
        <el-icon><Menu /></el-icon>
        <span>算法分类</span>
      </template>
      
      <el-menu-item 
        v-for="type in algorithmTypes" 
        :key="type.typeId"
        :index="'/algorithm/' + type.typeId">
        <el-icon><Connection /></el-icon>
        <span>{{ type.typeName }}</span>
      </el-menu-item>
    </el-sub-menu>



    <el-menu-item index="/ai-chat">
      <el-icon><ChatDotRound /></el-icon>
      <span>AI问答</span>
    </el-menu-item>

  </el-menu>
</template>

<script>
import {
  House,
  Menu,
  Connection,
  Edit,
  Reading,
  ChatDotRound
} from '@element-plus/icons-vue'
import axios from 'axios'

export default {
  name: 'Sidebar',
  components: {
    House,
    Menu,
    Connection,
    Edit,
    Reading,
    ChatDotRound
  },
  data() {
    return {
      algorithmTypes: []
    }
  },
  created() {
    this.fetchAlgorithmTypes()
  },
  methods: {
    async fetchAlgorithmTypes() {
      try {
        const response = await axios.get('/api/algorithm-types')
        if (response.data.code === 200) {
          this.algorithmTypes = response.data.data
        } else {
          this.$message.error('获取算法类型失败: ' + response.data.message)
        }
      } catch (error) {
        console.error('请求失败:', error)
        this.$message.error('获取算法类型失败，请检查网络连接')
      }
    }
  }
}
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
  border-right: none;
}

.sidebar-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

.sidebar-menu :deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  background-color: #e6f2ff;
  color: #409EFF;
}

.sidebar-menu :deep(.el-menu-item:hover),
.sidebar-menu :deep(.el-sub-menu__title:hover) {
  background-color: #e6f2ff;
}

.el-icon {
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
</style> 